<template>
	<common-card type="detail" title="成果详情" :loading="loading">
		<detail-body :data="dataDetail"></detail-body>
		<div class="data_detail_wrapper" v-if="dataDetail.isSave === '1' && dataDetail.audit !== '3'">
			<div class="item">
				<div class="label">审核人：</div>
				<div class="content">{{ dataDetail.auditName }}</div>
			</div>
			<div class="item">
				<div class="label">审核状态：</div>
				<div class="content">
					<el-tag type="success" v-if="dataDetail.audit === '1'">已通过</el-tag>
					<el-tag type="danger" v-if="dataDetail.audit === '2'">已驳回</el-tag>
				</div>
			</div>
			<div class="item">
				<div class="label">审核意见：</div>
				<div class="content">{{ dataDetail.auditDesc }}</div>
			</div>
			<div class="item">
				<div class="label">审核时间：</div>
				<div class="content">{{ dataDetail.auditTime }}</div>
			</div>
		</div>
		<template slot="button">
			<template v-if="userRole === 'member'">
				<el-button type="danger" icon="sw-icon-btn-added" @click="handleAddedData()">新建</el-button>
				<template v-if="dataDetail.isSave === '2'">
					<el-button type="warning" icon="sw-icon-edit" @click="handleEditData()">编辑</el-button>
				</template>
			</template>
			<template v-if="userRole === 'principal'">
				<template v-if="!!dataDetail.audit && dataDetail.audit === '3'">
					<el-button type="success" icon="sw-icon-btn-audit" @click="handleAuditData()">审核</el-button>
				</template>
			</template>
			<template v-if="userRole === 'manager'">
				<el-button type="success" icon="sw-icon-edit" @click="handleEditData()">编辑</el-button>
			</template>
		</template>
	</common-card>
</template>

<script>
import detailBody from './body';
import commonCard from '../commonCard';
import { marvelDetail } from '@/api/business/tbMarvel';
export default {
	components: { commonCard, detailBody },
	props: {
		userRole: { type: String, default: '' },
		dataType: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			dataDetail: {}
		};
	},
	computed: {
		dataId() {
			return this.$route.query.id || '';
		}
	},
	watch: {
		dataId: {
			handler(id) {
				this.loading = true;
				this.getDataDetail(id);
			},
			immediate: true
		}
	},
	methods: {
		//获取数据详情
		async getDataDetail(id) {
			let result = await marvelDetail(id).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.dataDetail = datas;
			}
		},

		handleAddedData() {
			this.$router.push(`/${this.userRole}/${this.dataType}/form`);
		},

		handleEditData() {
			let query = { id: this.dataDetail.id };
			this.$router.push({ path: `/${this.userRole}/${this.dataType}/edit`, query });
		},

		handleAuditData() {
			let query = { id: this.dataDetail.id };
			this.$router.push({ path: `/${this.userRole}/${this.dataType}/audit`, query });
		},

		handleFeedback() {
			let query = { expid: this.dataDetail.id };
			this.$router.push({ path: `/member/feedback`, query });
		}
	}
};
</script>

<style lang="scss" scoped></style>
